<template>
    <ElForm class="login-form" ref="loginRef" :model="loginParam" :rules="loginRules">
        <h1>登录</h1>
        <ElFormItem prop="username">
            <ElInput v-model="loginParam.username" placeholder="请输入账号" :prefix-icon="User"></ElInput>
        </ElFormItem>
        <ElFormItem prop="password">
            <ElInput v-model="loginParam.password" show-password placeholder="请输入密码" :prefix-icon="Lock"></ElInput>
        </ElFormItem>
        <ElFormItem>
            <ElButton class="submit" type="primary">登录</ElButton>
        </ElFormItem>
    </ElForm>
</template>

<script setup lang="ts">
import { User, Lock } from '@element-plus/icons-vue';
import { reactive,ref } from 'vue';
import { LoginReq } from '@/interface/user';
import { FormInstance,FormRules } from "element-plus";

const loginParam:LoginReq = reactive({
    username: "",
    password: ""
});

const loginRef = ref<FormInstance>();
const loginRules:FormRules= reactive({
    username:[{required:true,message:'账号不能为空',trigger:'blur'}],
    password:[{required:true,message:'密码不能为空',trigger:'blur'}],
});

</script>

<style lang="scss" scoped>
.login-form {
    grid-column: 1;
    grid-row: 1;
    pointer-events: all;
    h1{
        text-align: center;
    }
}
.login-form.sign-up-model {
    pointer-events: none;
}
.submit{
    width: 120px;
    margin: auto;
}
</style>